<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面元数据 -->
    <meta charset="UTF-8">
    <title>仪表盘 - 用户管理</title>
    <!-- 引入CSS样式表 -->
    <link rel="stylesheet" href="/css/dashboard.css">



</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <a href="/register">注册</a>
    <a href="/login">登录</a>
    <a href="/dashboard">仪表盘</a>
    <a href="/profile">个人中心</a>
    <a href="/logout">退出登录</a>
</div>

<!-- 容器div，用于布局 -->
<div class="container">
    <!-- 欢迎信息，显示当前登录用户名 -->
    <h2>欢迎回来, <span th:text="${username}">用户</span>!</h2>

    <!-- 用户列表 -->
    <h3>用户列表</h3>
    <table border="1" class="user-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="userList">
        <!-- 使用 Thymeleaf 渲染初始数据 -->
        <!-- 遍历用户列表 -->
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td> <!-- 显示用户ID -->
            <td th:text="${user.username}"></td> <!-- 显示用户名 -->
            <td>
                <!-- 编辑按钮，存储用户ID和用户名作为数据属性 -->
                <button class="edit-btn" th:data-id="${user.id}" th:data-name="${user.username}">编辑</button>
                <!-- 删除按钮，存储用户ID作为数据属性 -->
                <button class="delete-btn" th:data-id="${user.id}">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 添加/修改用户表单 -->
    <h3>添加/修改用户</h3>
    <form id="userForm">
        <!-- 隐藏的用户ID字段，用于区分新增和编辑 -->
        <input type="hidden" id="userId">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" required />
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" required />
        </div>
        <button type="submit">提交</button>
    </form>


</div>

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(function () {
        // API基础URL
        const API_URL = "/api/user";

        // 表单提交处理（创建或更新用户）
        $('#userForm').on('submit', function (e) {
            e.preventDefault(); // 阻止表单默认提交行为

            // 判断是新增还是编辑：根据是否存在用户ID
            const userId = $('#userId').val();
            const method = userId ? "PUT" : "POST"; // 存在ID用PUT请求（更新），否则用POST请求（新建）
            const url = userId ? `${API_URL}/${userId}` : API_URL; // 构建请求URL

            // 发送AJAX请求
            $.ajax({
                url,
                method,
                contentType: 'application/json',
                data: JSON.stringify({ // 将表单数据转换为JSON
                    username: $('#username').val(),
                    password: $('#password').val()
                }),
                success: function () { // 请求成功后的回调
                    $('#userForm')[0].reset(); // 重置表单
                    $('#userId').val(''); // 清空隐藏的用户ID字段
                    loadUsers(); // 重新加载用户列表
                }
            });
        });

        // 加载并显示用户列表
        function loadUsers() {
            $.get(API_URL, function (data) { // 向API发送GET请求获取用户列表
                const tbody = $('#userList').empty(); // 清空现有表格内容
                // 遍历返回的数据，逐行添加到表格中
                data.forEach(function (user) {
                    tbody.append(`
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.username}</td>
                        <td>
                            <button class="edit-btn" data-id="${user.id}" data-name="${user.username}">编辑</button>
                            <button class="delete-btn" data-id="${user.id}">删除</button>
                        </td>
                    </tr>
                `);
                });
            });
        }

        // 编辑用户功能
        $(document).on('click', '.edit-btn', function () {
            // 获取按钮上的数据属性
            const id = $(this).data('id');
            const name = $(this).data('name');
            // 填充到表单中供编辑
            $('#userId').val(id); // 设置隐藏的用户ID字段
            $('#username').val(name); // 设置用户名输入框
            $('#password').val(''); // 清空密码输入框
        });

        // 删除用户功能
        $(document).on('click', '.delete-btn', function () {
            const id = $(this).data('id'); // 获取要删除的用户ID
            if (confirm("确定要删除该用户吗？")) { // 确认删除
                // 发送DELETE请求到API
                $.ajax({
                    url: `${API_URL}/${id}`,
                    method: "DELETE",
                    success: function () { // 成功后重新加载用户列表
                        loadUsers();
                    }
                });
            }
        });

        // 页面加载时初始化用户列表
        loadUsers();
    });
</script>
